<template>
  <div class="home">
    <div class="logo">
      <img src="../assets/logo.png" alt="" />
    </div>
    <div class="main">
      <div class="ipt">
        <img src="../assets/tel.png" >
        <input type="text" maxlength="11" placeholder="请输入手机号" v-model="phone" />
      </div>
      <div class="ipt">
        <img src="../assets/ys.png" >
        <input type="password" placeholder="请输入密码" v-model="passwold" />
      </div>

      <div class="but">
        <button @click="login">登录</button>
      </div>
      <div class="flex">
        <span @click="wjmm()">忘记密码</span>
        <span @click="zhuce()">新用户注册</span>
      </div>
    </div>
    <div class="footer">
      <p>————————— <span>其它方式</span> —————————</p>
      <div>
        <img src="../assets/wx.png" alt="" />
      </div>
    </div>

    <section class="wmassageMask" v-show="writeMessageShow">
      <div class="tk">
        <p>登陆成功</p>
        <p class="border"></p>
        <button @click="qd">确定</button>
      </div>
    </section>

    <section class="wmassageMask" v-show="writeMessageShow1">
      <div class="tk">
        <p>账号或密码错误</p>
        <p class="border"></p>
        <button @click="qd1">确定</button>
      </div>
    </section>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      phone: "",
      passwold: "",
      writeMessageShow: false,
      writeMessageShow1: false,
      msg:""
    };
  },
  
  methods: {
    wjmm(){
      this.$router.push("/findpass")
    },
    zhuce(){
      this.$router.push("/reg")
    },
    qd(){
      this.writeMessageShow = !this.writeMessageShow
      this.$router.push("/Index")
    },
    qd1(){
      this.writeMessageShow1 = !this.writeMessageShow1
    },
    login() {
      var that = this;
      if (this.username === "" || this.password === "") {
        alert("账号或密码不能为空");
      } else {
        axios
          .post("/login/login", { phone: that.phone, password: that.passwold })
          .then(function (res) {
            that.msg=res.data.data.msg
            if(res.data.msg=="登陆成功"){that.writeMessageShow = true}
            console.log(res.data.msg)
            console.log(res.data.data.id)
            var id = res.data.data.id
            
            localStorage.setItem("ids",id),
            that.$router.push("/")
          })
          .catch(function (err) {
            console.log(err);
            if(err){that.writeMessageShow1 = true}
          });
      }
    }
  },
  components: {},
};
</script>
<style scoped>
* {

  text-align: center;
}
.home{position: relative;}
.wmassageMask{position: fixed;top: 0;bottom: 0;left: 0;width: 100%;background-color: rgba(0,0,0,.3);z-index: 101;}
.tk{width: 80%;margin: 10% 0;background-color: #ccc;position: absolute;top:12rem;left:10%;background-color: #fff;border-radius: 10px;}
.tk button{color: #278ED4;width: 100%;padding: 1rem;border: 0;background-color: #fff;border-radius: 10px;margin-bottom:0;}
.tk p{width: 100%;padding: 2rem 0;text-align: center;}
.tk p.border{border-top:1px solid #ccc;padding:0;width:100%;height: 1px;}
.logo {
  padding: 3rem 0;
}
.main {
  padding: 1rem;
  width: 80%;
  margin: 0 auto;
  font-size: 1rem;
  color: #999;
}
.main input {
  border: none;
  outline: medium;
  text-align: left;
}
.but button {
  width: 100%;
  color: #fff;
  background-color: #d62c32;
  border: 0;
  padding: 0.5rem;
  border-radius: 0.5rem;
  margin-top: 2rem;
  outline: medium;
}
.flex {
  display: flex;justify-content: space-between;margin-top: 1rem;font-size: 0.8rem;
}
.footer {
  margin-top: 2rem;
  color: #999;
  font-size: 0.8rem;
}
.footer span{padding: 0.6rem;}
.footer img {width: 2.4rem;margin-top: 2rem;}
.ipt{
  padding: 0.5rem;margin-top: 0.5rem;font-size: 1rem;background-color: #FCFCFC;border:none;outline:none;border-radius: 30px;
}
.ipt input{width: 77%;margin-left: 1rem;background-color: #FCFCFC;}
.ipt img{vertical-align: middle;width:1.5rem;margin-left: 0.6rem;}
</style>
